SF Symbol Design - Custom Symbols 自定義圖示動畫製作

圖示是如何被繪製的？就像這個心形，其實是用兩條線畫出來的，不是一整塊。還有像那種線條粗細會變的圖示，不能直接畫個邊就行，要更細緻地處理路徑。

那 Draw 動畫怎麼畫出來的？就是靠在圖示線上放一些“關鍵點”來指引它怎麼走。就像導航一樣，這些點會告訴系統動畫怎麼走這條線。至少要有兩個點：一個開頭，一個結尾，系統才能知道從哪畫到哪。

line.diagonal 斜線:一個起點和一個終點

scribble 塗鴉路徑:包含多個“額外的控制點”

line.3.horizontal 三條水平線:多個起點和終點（每條線有自己的）

arrow.trianglehead.clockwise 順時針箭頭:顯示了“Attachment guide”（連線點/附著點）

circle 圓形路徑:起點和終點相同

signature.ai 簽名字跡式路徑:強調“Corner points”（拐角點）

Single path 一條路徑圖示

Symbol with more than one path 2條以上路徑圖示

每一條路徑都可以單獨使用相同的規則，來自定義它自己的繪製路徑與方向。

Directionality from their center 從中心向外繪製的圖示

從中心向外繪製的圖示可以設定成兩邊一起畫。

Advanced options to refine the animation 讓動畫更精緻的高階選項

Circle 圓圈形狀的圖示

單一路徑（single subpath）”和“多子路徑（multiple subpaths）”的圖示在 Draw 動畫系統中的是有差異的。

For symbols with both drawing and non-drawing components 同時包含“可繪製”和“非繪製”元件的符號

有些圖示，比如箭頭，線可以畫出來，但箭頭頭不動就會怪怪的，我們得做點處理讓它跟著動！

Manual adjustment 手動調節

Corner points 有拐角點的圖示

9 種權重（粗細）和 3 種比例的適配

Variable Draw 變數圖示繪製